<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <link rel="stylesheet" href="/common/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <style type="text/css">
    body {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
<div class="layui-form">

  <div class="layuimini-form" style="height: 370px;overflow-y:auto">
    <div class="layui-form-item">
      <label class="layui-form-label required">角色名称</label>
      <div class="layui-input-block">
        <input name="roleName" lay-verify="required" lay-reqtext="角色名称不能为空" placeholder="请输入角色名称" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">权限字符</label>
      <div class="layui-input-block">
        <input name="roleSign" lay-verify="required" lay-reqtext="权限字符不能为空" placeholder="请输入权限字符" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">显示顺序</label>
      <div class="layui-input-block">
        <input name="roleSort" lay-verify="required" lay-reqtext="显示顺序不能为空" placeholder="请输入显示顺序" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">角色状态</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="开启" checked="">
        <input type="radio" name="status" value="-1" title="关闭">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <input name="remark" placeholder="请输入备注" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">角色权限</label>
      <div class="layui-input-block">
        <div id="roleMenuIds" style="border: 1px solid #e5e6e7;" name="roleMenuIds"></div>
      </div>
    </div>
  </div>


  <div class="layui-form-item" style="margin: 25px 10px;position:absolute;bottom: 0;right: 5%;">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
      <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:parent.layer.close(parent.layer.getFrameIndex(window.name));">取消</button>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/xm-select/xm-select.js"></script>
<script type="text/javascript" src="/common/blog-ui.js"></script>
<script type="text/javascript">

  layui.use(['tree','form'], function(){
    var tree = layui.tree;
    var form = layui.form;

    /**
     * 角色权限下拉框渲染
     * @param roleMenuTree
     * @return
     */
    var roleMenuTree = tree.render({
      id: "roleMenuIds",
      elem: '#roleMenuIds',  //绑定元素
      showCheckbox: true, //是否显示复选框
      icon: 'layui-icon layui-icon-form',
      data: getMenuByRole()
    });

    form.on('submit(saveBtn)',function (data){
      var checkData = tree.getChecked('roleMenuIds');
      const formData = {
        roleName: data.field.roleName,
        roleSign: data.field.roleSign,
        roleSort: data.field.roleSort,
        status: data.field.status,
        remark: data.field.remark,
        menuIds: Pt.getLayTreeCheckedId(checkData)
      }
      $.ajax({
        url: "/role/admin/addRole",
        contentType: "application/json",
        type: "post",
        dataType: "json",
        data:JSON.stringify(formData),
        success(res){
          if (res.state){
            parent.layui.table.reload('currentRoleTable');
            parent.layer.closeAll();
          }
          console.log(res);
        },
        error(res){
          console.log(res)
        }
      })
    })
  });

  function getMenuByRole(){
    var treeData;
    $.ajax({
      url: "/role/admin/getMenuByRole",
      type: "get",
      async: false,
      success(res){
        if (res.state){
          treeData = res.data;
        }
      },
      error(res){
        console.log(res)
      }
    })
    return treeData;
  }
</script>
</html>